<template>
  <div class="app-container">
    <!-- 添加或修改表单定义对话框 -->
    <el-dialog :title="title" v-model="open" width="400px" v-if="open" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="77.45px" :disabled="disabled">
        <el-form-item label="表单编码" prop="formCode">
          <el-input v-model="form.formCode" placeholder="请输入表单编码" maxlength="40" show-word-limit />
        </el-form-item>
        <el-form-item label="表单名称" prop="formName">
          <el-input v-model="form.formName" placeholder="请输入表单名称" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="表单版本" prop="version">
          <el-input v-model="form.version" placeholder="请输入表单版本" maxlength="20" show-word-limit />
        </el-form-item>
        <el-form-item label="表单类型" prop="formType">
          <el-select v-model="form.formType" placeholder="请选择表单类型">
            <el-option label="内置表单" :value="0"></el-option>
            <el-option label="外挂表单" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表单路径" v-if="form.formType === 1" prop="formPath">
          <el-input v-model="form.formPath" placeholder="请输入表单路径" maxlength="100" show-word-limit />
        </el-form-item>
      </el-form>
        <template #footer class="dialog-footer">
          <el-button type="primary" v-if="!disabled" @click="submitForm">确 定</el-button>
          <el-button @click="cancel" v-if="!disabled">取 消</el-button>
          <el-button @click="cancel" v-if="disabled">关 闭</el-button>
        </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  import {
    getDefinition,
    addDefinition,
    updateDefinition
  } from "@/api/form/definition";
  import {
    ElMessage
  } from 'element-plus'

  // 声明向外暴露的事件（用于通知父组件刷新）
  const emit = defineEmits(['refresh'])

  // 响应式变量
  const open = ref(false) // 控制对话框显示
  const title = ref('') // 对话框标题
  const disabled = ref(false) // 是否禁用表单（详情模式）
  const formRef = ref(null) // 表单引用

  // 表单数据
  const form = reactive({
    id: null,
    formCode: null,
    formName: null,
    version: null,
    formType: null,
    formPath: null
  })

  // 表单验证规则
  const rules = ref({
    formCode: [{
      required: true,
      message: "表单编码不能为空",
      trigger: "blur"
    }],
    formName: [{
      required: true,
      message: "表单名称不能为空",
      trigger: "blur"
    }],
    version: [{
      required: true,
      message: "表单版本不能为空",
      trigger: "blur"
    }],
    formType: [{
      required: true,
      message: "表单类型不能为空",
      trigger: "blur"
    }],
    formPath: [{
      required: true,
      message: "表单路径不能为空",
      trigger: "blur"
    }]
  })

  // 打开对话框方法（供父组件调用）
  async function show(id, isDisabled) {
    reset() // 重置表单
    disabled.value = isDisabled || false

    // 如果是编辑/详情模式，加载数据
    if (id) {
      try {
        const response = await getDefinition(id)
        Object.assign(form, response.data) // 赋值表单数据
      } catch (error) {
        console.error('获取表单数据失败:', error)
        ElMessage.error('加载表单失败，请重试')
        return
      }
    }

    // 设置标题并显示对话框
    open.value = true
    if (disabled.value) {
      title.value = "详情"
    } else if (id) {
      title.value = "修改"
    } else {
      title.value = "新增"
    }
  }

  // 取消操作
  function cancel() {
    open.value = false
    reset()
  }

  // 重置表单
  function reset() {
    // 清空表单数据
    form.id = null
    form.formCode = null
    form.formName = null
    form.version = null
    form.formType = null
    form.formPath = null

    // 重置表单验证状态
    if (formRef.value) {
      formRef.value.resetFields()
    }
  }

  // 提交表单
  async function submitForm() {
    if (!formRef.value) return

    try {
      // 表单验证
      await formRef.value.validate()

      // 处理内置表单的路径（强制清空）
      if (form.formType === 0) {
        form.formPath = ""
      }

      // 区分新增/修改操作
      if (form.id) {
        // 修改
        await updateDefinition(form)
        ElMessage.success("修改成功")
      } else {
        // 新增（删除id属性）
        const newForm = {
          ...form
        }
        delete newForm.id
        await addDefinition(newForm)
        ElMessage.success("新增成功")
      }

      // 关闭对话框并通知父组件刷新
      open.value = false
      emit('refresh')
    } catch (error) {
      // 验证失败或接口报错时不关闭对话框
      if (error.name !== 'ValidationError') {
        console.error('提交失败:', error)
        ElMessage.error('操作失败，请重试')
      }
    }
  }

  // 向外暴露show方法（供父组件调用打开对话框）
  defineExpose({
    show
  })
</script>